<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/style/gwc.css"/>
		<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/iscroll.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/iscroll-probe.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- Modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">提示</h4>
		      </div>
		      <div class="modal-body" id="modal-body">
					
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-danger b" data-dismiss="modal" value="true">是</button>
		        <button type="button" class="btn btn-info b" data-dismiss="modal" value="">否</button>
		      </div>
		    </div>
		  </div>
		</div>
		<div id="big">
			<header>
				<div>
					<a href="首页.html" class="glyphicon glyphicon-menu-left"></a>
				</div>
				<div>
					<span class="glyphicon glyphicon-search"></span>
					<input type="text" id="searchInput"/>
				</div>
				<a href="#">
					<span class="glyphicon glyphicon-th-list"></span><br />
					<span>分类</span>
				</a>
			</header>
			
			
			<main>
				<li id="firstLi">
							<div>
								<input type="checkbox" id="all" checked="checked"/>
							</div>
							<div>
								天猫超市
							</div>
						</li>
				<div>
					<ul id="list">
						
						
						
					</ul>
				</div>
					
			</main>
			
			
			
			<footer>
				<div>
					
					<input type="checkbox" />
					
				</div>
				<div>
					<p>
						<span>总量:</span><span id="kg"></span><span>kg</span>
					</p>
					<p>
						<span>总价:￥</span><span id="zj"></span><span></span>
					</p>
				</div>
				<div>
					<button id="js">
						<span>结算</span>
						(<span id="jiesuan"></span>)
					</button>
				</div>
			</footer>
		</div>
	
	
	
	
	
	<script>
		(function(doc, win){
	        var docEl = doc.documentElement,
	            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	            recalc = function(){
	                var clientWidth = docEl.clientWidth;
	                if(!clientWidth) return;
	                docEl.style.fontSize = 100 * (clientWidth / 330) + 'px';
	            };
	        if(!doc.addEventListener) return;
	        win.addEventListener(resizeEvt, recalc, false);
	        doc.addEventListener('DOMContentLoaded', recalc, false);
	    })(document, window);
		var phone = localStorage.getItem("name");
		var addr = localStorage.getItem("addr");
		var xm = localStorage.getItem("xm");
		var arr = [];
		function zzz (arr){
			var str = "";
			for(var d of arr){
				str += `
					<li>
						<div>
							<input type="checkbox" class="check" checked="checked"/>
						</div>
						<div>
							<img src="${d.img}"/>
						</div>
						<div>
							<p>${d.name}</p>
							<button class="jian">-</button>
							<input type="number" value="${d.count}" disabled="disabled" class="num"/>
							<button class="jia">+</button>
						</div>
						<div>
							<span>数量</span>x<span class="count">${d.count}</span><br />
							<span>￥</span><span class="zj">${d.price}</span><br />
							<span class="glyphicon glyphicon-trash del"></span>
						</div>
					</li>
				`
			}
			$("#list").empty()
			$("#list").append(str)
		}
		$.ajax({
			type:"get",
			url:"http://47.92.37.168/supermarket/data/get_commodity_car.php",
			async:false,
			data : {
				user_phone : phone
			},
			dataType : "jsonp",
			jsonp : "callback",
			success : function(data){
				arr = [];
				for(var a of data){
					var obj = {
						id : a.commodity_id,
						count : a.count
					}
					console.log(a.commodity_id)
					$.ajax({
						type:"get",
						url:"http://47.92.37.168/supermarket/data/get_commodity_info.php",
						async:false,
						dataType : "json",
						data : {
							id : a.commodity_id
						},
						success : function(data1){
							obj.name = data1.name
							obj.img = "http://47.92.37.168/supermarket/img/"+data1.img
							obj.price = data1.price
							obj.flag = true
						}
					});
					arr.push(obj)
				}
				console.log(arr)
				zzz(arr)
				$("#zj").text(zongjia(arr))
				$("#jiesuan").text(jiesuan(arr))
//				判斷複選框是否全部被選中
				$(".check").each(function(ind){
					$(this).click(function(){
						var flag = true;
						arr[ind].flag = $(this).prop("checked")
						$("#zj").text(zongjia(arr))
						$("#jiesuan").text(jiesuan(arr))
						console.log(arr)
						$(".check").each(function(ind){
							if($(this).prop("checked")){
								
							}else{
								flag = false;
								$("#all").prop("checked",false)
							}
							if(flag){
								$("#all").prop("checked",true)
							}
						})
					})
				})
				var i = false;
				
//				刪除
				$(".del").each(function(ind){
					$(this).click(function(){
						k = ind
						$("#modal-body").text("是否要删除第"+(ind+1)+"项商品");
						$('#myModal').modal()
						
					})
				})
				
				
				
				
				
				
//				------------------------------
				$(".jia").each(function(ind){
					$(this).click(function(){
						$(".num").eq(ind).val(parseInt($(".num").eq(ind).val())+1)
						$.ajax({
							type:"get",
							url:"http://47.92.37.168/supermarket/data/my_commodity_update_car.php",
							async:true,
							dataType : "jsonp",
							jsonp : "callback",
							data : {
								'user_phone':phone,
								'commodity_id':arr[ind].id,
								'count':parseInt($(".num").eq(ind).val())
							},
							success : function(data){
								console.log(data)
								arr[ind].count = parseInt($(".num").eq(ind).val())
								console.log(arr)
								$(".count").eq(ind).text($(".num").eq(ind).val())
								$("#zj").text(zongjia(arr))
								$("#jiesuan").text(jiesuan(arr))
							}
						});
					})
				})
				$(".jian").each(function(ind){
					$(this).click(function(){
						if(parseInt($(".num").eq(ind).val()) <= 1){
							
						}else{
							$(".num").eq(ind).val(parseInt($(".num").eq(ind).val())-1)
							$.ajax({
								type:"get",
								url:"http://47.92.37.168/supermarket/data/my_commodity_update_car.php",
								async:true,
								dataType : "jsonp",
								jsonp : "callback",
								data : {
									'user_phone':phone,
									'commodity_id':arr[ind].id,
									'count':parseInt($(".num").eq(ind).val())
								},
								success : function(data){
									console.log(data)
									arr[ind].count = parseInt($(".num").eq(ind).val())
									console.log(arr)
									$(".count").eq(ind).text($(".num").eq(ind).val())
									$("#zj").text(zongjia(arr))
									$("#jiesuan").text(jiesuan(arr))
								}
							});
						}
					})
				})
				
			}
		});
//		全選
		$("#all").click(function(){
			var flag = $(this).prop("checked")
			$(".check").each(function(ind){
				$(this).prop("checked",flag)
				arr[ind].flag = flag
				$("#zj").text(zongjia(arr))
				$("#jiesuan").text(jiesuan(arr))
			})
		})
//		計算總價
		function zongjia(arr){
			var ss = 0
			for(var a of arr){
				if(a.flag){
					ss += parseFloat(a.price) * parseFloat(a.count)
				}
			}
			return ss
		}
//		商品總數
		function jiesuan(arr){
			var ss = 0
			for(var a of arr){
				if(a.flag){
					ss += parseFloat(a.count)
				}
			}
			return ss
		}
		$("#firstLi>div:nth-of-type(2)").click(function(e){
			e.preventDefault()
			$("#list").stop().slideToggle()
		})
		var k = 0;
		$(".b").each(function(ind){
			$(this).click(function(){
				i = Boolean($(this).val())
				console.log(i)
				if(i){
					$("#list>li").eq(k).remove()
					var id = arr[k].id
					$.ajax({
						type:"get",
						url:"http://47.92.37.168/supermarket/data/my_commodity_delete_car.php",
						async:true,
						dataType : "jsonp",
						jsonp : "callback",
						data : {
							commodity_id : id,
							user_phone : phone
						},
						success : function(data){
							console.log(data);
							arr.splice(k,1);
							var str = "";
							for(var d of arr){
								str += `
									<li>
										<div>
											<input type="checkbox" class="check" checked="checked"/>
										</div>
										<div>
											<img src="${d.img}"/>
										</div>
										<div>
											<p>${d.name}</p>
											<button class="jian">-</button>
											<input type="number" value="${d.count}" disabled="disabled" class="num"/>
											<button class="jia">+</button>
										</div>
										<div>
											<span>数量</span>x<span class="count">${d.count}</span><br />
											<span>￥</span><span class="zj">${d.price}</span><br />
											<span class="glyphicon glyphicon-trash del"></span>
										</div>
									</li>
								`
							}
							$("#list").empty()
							$("#list").append(str)
							$("#zj").text(zongjia(arr))
							$("#jiesuan").text(jiesuan(arr))
							$(".check").each(function(ind){
								$(this).click(function(){
									var flag = true;
									arr[ind].flag = $(this).prop("checked")
									$("#zj").text(zongjia(arr))
									$("#jiesuan").text(jiesuan(arr))
									console.log(arr)
									$(".check").each(function(ind){
										if($(this).prop("checked")){
											
										}else{
											flag = false;
											$("#all").prop("checked",false)
										}
										if(flag){
											$("#all").prop("checked",true)
										}
									})
								})
							})
							
							$(".del").each(function(ind){
								$(this).click(function(){
									k = ind
									$("#modal-body").text("是否要删除第"+(ind+1)+"项商品");
									$('#myModal').modal()
									
								})
							})
							$(".jia").each(function(ind){
								$(this).click(function(){
									$(".num").eq(ind).val(parseInt($(".num").eq(ind).val())+1)
									$.ajax({
										type:"get",
										url:"http://47.92.37.168/supermarket/data/my_commodity_update_car.php",
										async:true,
										dataType : "jsonp",
										jsonp : "callback",
										data : {
											'user_phone':phone,
											'commodity_id':arr[ind].id,
											'count':parseInt($(".num").eq(ind).val())+1
										},
										success : function(data){
											console.log(data)
											arr[ind].count = parseInt($(".num").eq(ind).val())
											console.log(arr)
											$(".count").eq(ind).text($(".num").eq(ind).val())
											$("#zj").text(zongjia(arr))
											$("#jiesuan").text(jiesuan(arr))
										}
									});
								})
							})
							$(".jian").each(function(ind){
								$(this).click(function(){
									if(parseInt($(".num").eq(ind).val()) <= 1){
										
									}else{
										$(".num").eq(ind).val(parseInt($(".num").eq(ind).val())-1)
										$.ajax({
											type:"get",
											url:"http://47.92.37.168/supermarket/data/my_commodity_update_car.php",
											async:true,
											dataType : "jsonp",
											jsonp : "callback",
											data : {
												'user_phone':phone,
												'commodity_id':arr[ind].id,
												'count':parseInt($(".num").eq(ind).val())+1
											},
											success : function(data){
												console.log(data)
												arr[ind].count = parseInt($(".num").eq(ind).val())
												console.log(arr)
												$(".count").eq(ind).text($(".num").eq(ind).val())
												$("#zj").text(zongjia(arr))
												$("#jiesuan").text(jiesuan(arr))
											}
										});
									}
								})
							})
						}
					});
					i = false
					
				}else{
					i = false
				}
			})
		})
		
		$("#js").click(function(){
			if(localStorage.getItem("addr") && localStorage.getItem("name")){
				location.href = "付款成功.html"
			}else{
				location.href = "收货地址.html"
			}
//			$.ajax({
//				type:"get",
//				url:"http://47.92.37.168/supermarket/data/my_commodity_order.php",
//				async:true,
//				dataType : "jsonp",
//				jsonp : "callback",
//				data : {
//					commodity_id : arr[k].id,
//					user_phone : phone,
//					count : arr[k].count,
//					user_name : xm,
//					user_addr : addr,
//					consignee_phone : phone
//				},
//				success : function(data){
//					console.log(data)
//					if(data.msg == "error"){
//						location.href = "收货地址.html"
//					}else{
//						
//					}
//				}
//			});
		})
	</script>
	</body>
</html>
